import { 
  ElContainer, ElHeader, ElAside, ElMain, ElFooter,
  ElRow, ElCol,
  ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton,
  ElTable, ElTableColumn, ElCard,
  ElMenu, ElMenuItem, ElTabs, ElTabPane
} from 'element-plus';

 type ElementProps = {
  // 布局属性
  direction?: 'horizontal' | 'vertical';
  // 通用属性
  width?: string;
  height?: string;
  // Element Plus注入属性
  [key: string]: any;
};

type ComponentConfig = {
  component: any;
  props: ElementProps;
  children: ComponentConfig[];
  slots?: Record<string, string>;
};

class ElementDSL {
  private config: ComponentConfig;

  constructor(component: any) {
    this.config = {
      component,
      props: {},
      children: [],
    };
  }
  label(value: string): this {
    this.config.props.label = value;
    return this;
  }
  
  text(value: string): this {
    this.config.props.text = value;
    return this;
  }
  
  type(value: string): this {
    this.config.props.type = value;
    return this;
  }
  
  value(value: string): this {
    this.config.props.value = value;
    return this;
  }
  placeholder(value: string): this {
    this.config.props.placeholder = value;
    return this;
  }
  width(value: string): this {
    this.config.props.width = value;
    return this;
  }

  height(value: string): this {
    this.config.props.height = value;
    return this;
  }

  direction(value: 'horizontal' | 'vertical'): this {
    this.config.props.direction = value;
    return this;
  }

  // 样式扩展
  padding(value: string): this {
    this.config.props.style = this.config.props.style || {};
    this.config.props.style.padding = value;
    return this;
  }

  margin(value: string): this {
    this.config.props.style = this.config.props.style || {};
    this.config.props.style.margin = value;
    return this;
  }

  // 状态控制
  disabled(value: boolean): this {
    this.config.props.disabled = value;
    return this;
  }

  loading(value: boolean): this {
    this.config.props.loading = value;
    return this;
  }

  // 事件绑定
  on(event: string, handler: Function): this {
    this.config.props[`on${event.charAt(0).toUpperCase() + event.slice(1)}`] = handler;
    return this;
  }

  // 表单验证
  rules(rules: any): this {
    this.config.props.rules = rules;
    return this;
  }

  addChild(child: ElementDSL): this {
    this.config.children.push(child.config);
    return this;
  }

  slot(name: string, content: string): this {
    this.config.slots = this.config.slots || {};
    this.config.slots[name] = content;
    return this;
  }

  build(): ComponentConfig {
    return this.config;
  }
}

// 布局组件
export const container = () => new ElementDSL(ElContainer);
export const header = () => new ElementDSL(ElHeader);
export const aside = () => new ElementDSL(ElAside);
export const main = () => new ElementDSL(ElMain);
export const footer = () => new ElementDSL(ElFooter);
export const row = () => new ElementDSL(ElRow);
export const col = () => new ElementDSL(ElCol);

// 表单组件
export const form = () => new ElementDSL(ElForm);
export const formItem = () => new ElementDSL(ElFormItem);
export const input = () => new ElementDSL(ElInput);
export const select = () => new ElementDSL(ElSelect);
export const option = () => new ElementDSL(ElOption);
export const button = () => new ElementDSL(ElButton);

// 数据展示组件
export const table = () => new ElementDSL(ElTable);
export const tableColumn = () => new ElementDSL(ElTableColumn);
export const card = () => new ElementDSL(ElCard);

// 导航组件
export const menu = () => new ElementDSL(ElMenu);
export const menuItem = () => new ElementDSL(ElMenuItem);
export const tabs = () => new ElementDSL(ElTabs);
export const tabPane = () => new ElementDSL(ElTabPane);
